<route>
{
  "meta":{
    "title":"系统信息",
    "envHide":"DESINGER,PREVIEW",
    "showMenu" :true,
    "serialNum": 60,
    "localism": "sys.system_information"
  }
}
</route>
<template>
  <div>
    <el-divider content-position="left">{{
      $t("sys.basic_information")
    }}</el-divider>
    <p class="mt30">
      {{ $t("sys.current_package_environment") }}：{{ systemInfo.packageEnv }}
    </p>
    <p>
      {{ $t("sys.current_system_version") }}： {{ systemInfo.systemVersion }}
    </p>
    <div class="mt40">
      <el-divider content-position="left">{{
        $t("sys.environmental_detection")
      }}</el-divider>
    </div>
    <div>
      <span class="mr20">{{ $t("sys.process_configuration") }}</span>
      <el-button type="text" @click="handleCheck">{{
        $t("sys.inspect")
      }}</el-button>
      <el-row>
        <p v-if="processRes === true">
          <span style="color: #5daf34">
            <i class="el-icon-success"></i>
            {{ $t("sys.normal") }}
          </span>
        </p>
        <p v-else-if="processRes">
          <span style="color: #dd6161">
            <i class="el-icon-error mr10"> </i>{{ processRes }}
          </span>
        </p>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getAppconfigSysteminfo } from "@/apis/paas/HmPublishedAppController.js";
import { getHmprocessHealthcheck } from "@/apis/paas/HmProcessController.js";
export default {
  name: "SystemInfo",
  data() {
    return {
      systemInfo: {},
      processRes: null,
      loading: false,
    };
  },

  created() {
    this.loadData();
  },

  methods: {
    loadData() {
      this.loading = true;
      getAppconfigSysteminfo()
        .then((res) => {
          this.systemInfo = res;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleCheck() {
      this.processRes = null;
      getHmprocessHealthcheck().then((res) => {
        if (res) {
          this.processRes = res;
        } else {
          this.processRes = true;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-json {
  padding: 8px 16px;
  border-radius: 4px;
  line-height: 2;
  margin: 0;
  overflow: auto;

  pre {
    margin: 0;
  }

  &_title {
    font-weight: bold;
    user-select: none;
  }

  &:not(:first-child) {
    margin-top: 10px;
  }

  &_tip {
    background-color: #ecf8ff;
    border-left: 5px solid #50bfff;
  }
  &_success {
    background-color: #f0f9eb;
    border-left: 5px solid #67c23a;
  }
  &_warning {
    background-color: #fff6f7;
    border-left: 5px solid #fe6c6f;
  }
}
</style>
